<!--
 * @Description: 能源管理页面
-->
<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <!-- <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel('formData')"
        @edit="edit"
        @del="del"
        @save="save('formData')"
      /> -->
    </template>
    <template v-slot:farmtypeselectslot>
      <!-- <SelectButton @topitemtype="topitemtype" /> -->
    </template>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">能源名称:</div>
        <div class="input">
          <el-input
            v-model="energyName"
            placeholder="请输入能源名称"
            clearable
          />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">能源编码:</div>
        <div class="input">
          <el-input
            v-model="energyCoding"
            placeholder="请输入能源编码"
            clearable
          />
        </div>
      </div>
      <div class="search ml-20">
        <img
          src="~@/assets/action-bar-icon/search.png"
          @click="queryPageList"
        />
      </div>
    </template>
    <template v-slot:tablebox>
      <!-- 表格 -->
      <el-table
        ref="tableData"
        :v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        max-height="88%"
        @row-click="handleEdit"
        @select="handleSelectionChange"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="energyName" label="能源名称" />
        <el-table-column prop="energyCoding" label="能源类型编码" />
      </el-table>
      <!-- 分页组件 -->
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <!-- 左右布局的右边布局插槽 -->
    <template v-slot:form>
      <el-form
        ref="formData"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="能源名称:" prop="energyName" class="w100p">
          <el-input
            v-model="formData.energyName"
            :disabled="!canInput"
            placeholder="请输入能源名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="能源类型编码:" prop="energyCoding" class="w100p">
          <el-input
            v-model="formData.energyCoding"
            :disabled="nowChanceStau === 'add' ? !canInput : canInput"
            placeholder="请输入能源类型编码"
            clearable
          />
        </el-form-item>
      </el-form>
    </template>
  </BaseMainSlot>
</template>

<script>
// import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
// import SelectButton from "@/components/selectbutton";
import BaseMainSlot from "@/components/BaseMainSlot";
import { mymixin } from "@/utils/mixin";
import req from "@/api/basic-info-manage/energy-manage";
// import { format } from 'echarts';
// SelectButton
export default {
  name: "EnergyManage",
  components: { Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      condition: {
        entity: {
          energyCoding: "",
          energyName: ""
        },
        page: 1,
        size: 10
      },
      energyName: "",
      energyCoding: "",
      rules: {
        energyName: [
          { required: true, message: "请选择能源名称", trigger: "blur" }
        ],
        energyCoding: [
          { required: true, message: "请输入能源类型编码", trigger: "blur" }
        ]
      },
      tableData: [],
      // 获取单选后的表格数据
      selectList: "",
      loading: false
    };
  },
  watch: {
    nowChanceStau(newval) {
      if (newval === "cancel") {
        this.$refs.tableData.setCurrentRow();
        this.nowChanceStau = "";
      }
    }
  },
  created() {
    this.queryPageList();
  },
  mounted() {},
  methods: {
    // 初始化数据
    queryPageList() {
      this.condition.entity.energyCoding = this.energyCoding;
      this.condition.entity.energyName = this.energyName;
      this.loading = true;
      req.queryEnergyTypePage(this.condition).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          this.tableData = data.content || [];
        }
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.condition.size = pageSize;
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.condition.page = currentPage;
    },
    handleEdit(row) {
      if (row.energyTypeId) {
        this.formData = JSON.parse(JSON.stringify(row));
        // this.addActive = true;
        // this.addActive = false;
        this.editActive = true;
        this.saveActive = false;
        this.cancelActive = true;
        this.canInput = false;
      }
    },
    selectAll(selection, row) {
      this.selectList = []; // 清空已选
      this.$message.error("一次只能选择一个！");
      // 选择项大于1时
      if (selection.length > 1) {
        selection.length = 1;
        this.selectList.push(selection[0]);
      } else {
        this.selectList.push(selection[0]);
      }
    },
    handleSelectionChange(list, row) {
      // 单选
      this.selectList = [];
      if (list.length > 1) {
        // this.$message.error("一次只能删除一个作业！");
        let del_row = list.shift();
        // console.log('把数组的第一个元素从其中删除后', selection);
        this.$refs.tableData.toggleRowSelection(del_row, false);
        this.selectList = [row.energyCoding]; // 表格数据里面的id
      } else if (list.length === 1) {
        this.selectList = [row.energyCoding]; // 表格数据里面的id
      }
      if (this.selectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 保存方法
    save(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          // console.log(valid)
          if (!this.formData.energyCoding || !this.formData.energyName) {
            this.$message.warning("请将数据填写完整！");
            return;
          } else {
            if (this.nowChanceStau === "edit") {
              req.edit(this.formData).then((res) => {
                if (res.code === 1) {
                  this.$message.success(res.msg || "修改成功！");
                  this.addDialog = false;
                  this.addActive = true;
                  this.nowChanceStau = "";
                  this.formData = {};
                  this.queryPageList();
                } else {
                  this.$message.error(res.msg || "修改失败！");
                }
              });
            } else if (this.nowChanceStau === "add") {
              req.add(this.formData).then((res) => {
                if (res.code === 1) {
                  this.$message.success(res.msg || "新增成功！");
                  this.addDialog = false;
                  this.addActive = true;
                  this.nowChanceStau = "";
                  this.formData = {};
                  this.queryPageList();
                } else {
                  this.$message.error(res.msg || "新增失败！");
                }
              });
            }
          }
        } else {
          this.$message.warning("请将数据填写完整！");
        }
      });
    },
    delmessage() {
      req
        .del({
          energyCoding: this.selectList[0]
        })
        .then((res) => {
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.queryPageList();
          } else {
            this.$message.warning(res.msg || '删除失败');
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
::v-deep .el-table {
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
::v-deep .el-tabs__nav {
  border: 1px solid $inputBorderColor;
  border-bottom: none;
}
::v-deep .el-tabs__item {
  border-left: 1px solid $inputBorderColor;
  color: $menuText;
}
::v-deep .el-tabs__header {
  border-bottom: 1px solid $inputBorderColor;
}
::v-deep .el-tabs__item.is-active {
  border-bottom-color: $appMainBgColor;
  color: $inputBorderColor;
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  min-width: 120px !important;
  text-align: end;
}
::v-deep .el-tabs__content {
  width: 100%;
  height: calc(100%);
}
.el-tabs {
  height: calc(100% - 120px);
}
.el-tab-pane {
  height: 100%;
}
::v-deep .el-input__inner {
  background-color: transparent;
  color: #fff;
  // border-radius: 5px;
  border-color: #6ecae3;
}
::v-deep .el-textarea__inner {
  border-radius: 5px;
}
.map {
  width: 100%;
  height: 300px;
}
::v-deep .search-box {
  margin-top: 10px;
}
::v-deep .el-upload--picture-card {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #6ecae3;
}
::v-deep .el-upload--picture-card {
  position: relative;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  font-size: 34px;
  color: #6ecae3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
